<template>
  <div class="right-side-container" @wheel="handleScroll($event)">
    <div v-if="store.currentComponentIndex === -1" class="content flex justify-content-center align-items-center">
      点击题型进行编辑
    </div>
    <div v-else>
      <EditPannel :currentComponent="currentComponent" />
    </div>
  </div>
</template>

<script setup>
import { computed, provide } from 'vue';
import { handleScroll } from '@/utils';
import EditPannel from '@/components/SurveyComs/EditItems/EditPannel.vue';

import { useEditorStore } from '@/stores/useEditor';
const store = useEditorStore();
import { ElMessage } from 'element-plus';
import { changeShowStatus } from '@/utils';

const currentComponent = computed(() => store.coms[store.currentComponentIndex]);

const updateStatus = (configKey, payload) => {
  // 拿到新的状态数据之后，就应该去修改仓库里面的数据
  switch (configKey) {
    case 'title':
    case 'desc':
      if (typeof payload !== 'string') {
        console.error('Invalid payload type for "title or desc". Expected string.');
        return;
      }
      store.setTextStatus(currentComponent.value.status[configKey], payload);
      break;
    case 'options':
      if (typeof payload === 'number') {
        const result = store.removeOption(currentComponent.value.status[configKey], payload);
        if (result) {
          ElMessage.success('删除成功！');
        } else {
          ElMessage.error('至少保留两个选项！');
        }
      } else if (typeof payload === 'object') {
        if (payload.DateTime) {
          store.setDateTime(currentComponent.value.status[configKey], payload.value);
        } else {
          store.setOptionLink(currentComponent.value.status[configKey], payload);
        }
      } else if (payload === 'addPicOption') {
        store.addPicOption(currentComponent.value.status[configKey]);
      } else if (typeof payload === 'boolean') {
        store.setOptionIsUse(currentComponent.value.status[configKey], payload);
      } else {
        store.addOption(currentComponent.value.status[configKey]);
      }
      break;
    case 'position':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setPosition(currentComponent.value.status[configKey], payload);
      break;
    case 'titleSize':
    case 'descSize':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontSize(currentComponent.value.status[configKey], payload);
      break;
    case 'titleWeight':
    case 'descWeight':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontWeight(currentComponent.value.status[configKey], payload);
      break;
    case 'titleItalic':
    case 'descItalic':
      if (typeof payload !== 'number') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontItalic(currentComponent.value.status[configKey], payload);
      break;
    case 'titleColor':
    case 'descColor':
      if (typeof payload !== 'string') {
        console.error('Invalid payload type for "type". Expected string.');
        return;
      }
      store.setFontColor(currentComponent.value.status[configKey], payload);
      break;
    case 'type':
      if (typeof payload === 'object') {
        store.setTextType(currentComponent.value.status[configKey], payload.value);
      } else {
        changeShowStatus(currentComponent.value.status, payload);
        store.setTextType(currentComponent.value.status[configKey], payload);
      }
      break;
    default:
      console.warn(`Unknown configKey: ${configKey}`);
  }
};

const getLink = (row) => {
  updateStatus('options', row);
};
provide('updateStatus', updateStatus);
provide('getLink', getLink);
</script>

<style scoped lang="scss">
.right-side-container {
  width: 350px;
  height: calc(100vh - 50px - 40px);
  position: fixed;
  right: 20px;
  top: 70px;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow-y: scroll;
}
.content {
  height: 100%;
}
</style>
